<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
    <title>ReactHooks介绍</title>
</head>

<body>
    <div>
        <h1>React Hooks是用来做什么的</h1>
        <p>
            对函数型组件进行增强，让函数组件可以存储状态，可以拥有
            副作用的能力，让开发者在不使用类组件的情况下，实现相同的功能
        </p>
    </div>
    <div>
        <h1>类组件的不足（Hooks）要解决的问题</h1>
        <div>
            <h2>1.缺少逻辑复用机制</h2>
            <p>为了复用逻辑增加无实际渲染效果的组件，增加了组件层级，
                显示十分臃肿，增加了调试的难度以及运行效率低
            </p>
        </div>
        <div>
            <h2>2.类组件经常会变得很复杂难以维护</h2>
            <p>将一组相干的业务逻辑拆分到多个生命周期函数中，在一个生命周期函数内存在
                多个不相干的业务逻辑
            </p>
        </div>
        <div>
            <h2>3.类成员方法不能保证this指向的正确性</h2>
        </div>
        <div>
            <p>Hooks 意为钩子，React Hooks 就是一堆钩子函数，React通过这个钩子函数对函数型
                组件进行增强，不同的钩子函数提供了不同的功能
            </p>
            <p>useState() </p>
            <p>useEffects() </p>
            <p>useReducer() </p>
            <p>useRef() </p>
            <p>useCallback() </p>
            <p>useContext() </p>
            <p>useMemo() </p>
        </div>
    </div>
</body>

</html>